<template>
  <base-breadcrumb>
    <a-card>
      <title-name title="设计变更基础信息" />
      <a-form layout="horizontal">
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="分公司"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.branch"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="项目名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.project"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="项目设计管理类别"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.projectType"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="设计变更名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeName"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="设计变更编号"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeNum"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="专业"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.majorName"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="发起部门"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.department"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="施工图设计单位"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.designUnitName"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="施工图版本编号"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.versionNum"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="变更日期"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeTime"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="变更形式"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeFormName"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="预期影响天数（天）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.influences"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!--<a-col :md="8" :sm="8">-->
          <!--<a-form-model-item-->
          <!--label="提出方"-->
          <!--:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"-->
          <!--:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
          <!--&gt;-->
          <!--<BaseInput v-model="dels.proposerName" disabled />-->
          <!--</a-form-model-item>-->
          <!--</a-col>-->
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="成本费用（万）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.cost"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="变更费用（万）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeCost"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="单项工程设计变更率（%）"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeRate"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="设计变更等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.changeLevel"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="创建人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.creater"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="创建时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="dels.createdTime"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="变更类型"
              :label-col="{ lg: { span: 2 }, sm: { span: 2 } }"
              :wrapper-col="{ lg: { span: 22 }, sm: { span: 22 } }"
            >
              <BaseInput
                v-model="dels.changeTypeName"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="变更原因"
              :label-col="{ lg: { span: 2 }, sm: { span: 2 } }"
              :wrapper-col="{ lg: { span: 22 }, sm: { span: 22 } }"
            >
              <BaseInput
                v-model="dels.changeReasonName"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="设计变更及内容"
              :label-col="{ lg: { span: 2 }, sm: { span: 2 } }"
              :wrapper-col="{ lg: { span: 22 }, sm: { span: 22 } }"
            >
              <BaseInput
                v-model="dels.contents"
                type="textarea"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="工程总承包项目部会议评审意见"
              :label-col="{ lg: { span: 3 }, sm: { span: 3 } }"
              :wrapper-col="{ lg: { span: 21 }, sm: { span: 21 } }"
            >
              <BaseInput
                v-model="dels.opinion"
                type="textarea"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card>
      <title-name title="设计变更记录" />
      <a-form-model
        ref="form1"
        layout="horizontal"
        :model="form"
        :rules="rules"
      >
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="记录类型"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="recordType"
            >
              <a-select v-model="form.recordType">
                <a-select-option value="0">
                  变更终止
                </a-select-option>
                <a-select-option value="1">
                  变更完成维护
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="记录人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="recorder"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="记录时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="recordTime"
                placeholder=""
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="备注说明"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="remark"
            >
              <BaseTextarea
                v-model="form.remark"
                placeholder=""
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <title-name
        title="相关附件信息（备注：如果记录类型为“变更完成维护”，请上传变更通知单或洽商联系单等证明材料）"
      />
      <!--<u-table businessCode="PM11"></u-table>-->

      <a-upload
        name="file"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        @change="handleChanges"
      >
        <a-button
          type="primary"
          style="margin-bottom: 20px"
        >
          <a-icon
            type="upload"
            style="font-size: 1.2rem"
          />上传
        </a-button>
      </a-upload>
      <a-button
        type=""
        style="margin-bottom: 20px; margin-left: 20px"
        @click="deleteExteriorFile()"
      >
        <a-icon style="font-size: 1.2rem" />删除
      </a-button>

      <a-table
        row-key="id"
        bordered
        :columns="columnAssment"
        :data-source="dataAssement"
        :row-selection="rowSelections"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span><span
          slot="action"
          slot-scope="text, record, index"
        >
          <a
            :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + record.fileId"
            target="_parent"
          >导出</a>
        </span>
      </a-table>
    </a-card>

    <div class="page-btn-right-top">
      <a-button
        :loading="loading"
        type="primary"
        style="margin-right: 20px"
        @click="submit"
      >
        提交
      </a-button>
      <a-button
        type="primary"
        @click="goBack"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import Vue from 'vue'
import { STable, Ellipsis } from '@/components'
import { getDesignDetails, editDesignChange, deleteDesignChangeFile } from '@/api/project/designChange'
import { uploadFile, deleteUploadFile } from '@/api'

import ARow from 'ant-design-vue/es/grid/Row'

const columnAssment = [
  {
    title: '序号',
       width: 65,
    dataIndex: 'serial',

    scopedSlots: { customRender: 'serial' },
  },
  {
    title: '附件名称',
    dataIndex: 'fileName',
  },
  {
    title: '附件格式',
    dataIndex: 'suffixName',
    width: '25%',
  },
  {
    title: '操作',
    key: 'action',
    width: '20%',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+Date.now(),
  components: {
    ARow,
  },
  data() {
    return {
      columnAssment,
      dataAssement: [],
      uploadFile: {},
      deleteObj: {},
      token: '',
      fileFileds: null,
      fileIds: [],

      selectedRowKeys: [],
      selectedRows: [],

      businessCode: 'PM11',
      form: {},
      recorder: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
      recordTime: '',
      data: [],

      dels: { // 详情数据
        changeLevel:''
      },
      id: '',
      rules: {
        recordType: [{ required: true, message: '请选择记录类型', trigger: 'change' }],
        remark: [{ required: true, message: '请输入备注说明', trigger: 'blur' }],
      },
      loading: false
    }
  },

  created() {
    this.id = this.$route.query.id
    this.getMaintainDels()
    this.getCurrentDate() // 获取当前日期
    this.token = Vue.getAcloudProvider().getAccessToken()
  },
  computed: {
    rowSelections() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        selectedRows: this.selectedRows, // 当前行所有数据
        onChange: this.onSelectChanges,
      }
    },
  },
  methods: {
    // 上传
    deleteExteriorFile() {
      let that = this
      if (that.selectedRowKeys.length == 0) {
        that.$message.error('请先选中需要删除的附件！')
        return
      }
      if (that.id) {
        that.$confirm({
          title: '删除',
          content: '确定删除附件吗？',
          onOk() {
            deleteDesignChangeFile({ businessId: that.id, fileList: that.fileIds }).then((res) => {
              if (res.code == 200 || res.data.code == 200) {
                that.$message.success('删除附件成功！')
                that.dataAssement = that.dataAssement.filter((item) => {
                  return !that.selectedRowKeys.includes(item.id)
                })
                that.selectedRowKeys = []
                this.getMaintainDels()
              }
            })
          },
          onCancel() {},
        })
      } else {
        that.$confirm({
          title: '删除',
          content: '确定删除附件吗？',
          onOk() {
            deleteUploadFile({ fileIds: that.fileFileds }).then((res) => {
              if (res.code == '0' || res.data.code == '0') {
                let data = that.dataAssement
                let selectDatas = that.fileIds
                that.dataAssement = data.filter((item) => {
                  return !selectDatas.includes(item.id)
                })
              }
            })
          },
          onCancel() {},
        })
      }
    },
    onSelectChanges(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      let fileFileds = []
      let fileIds = []
      selectedRows.forEach(function (obj, i) {
        fileFileds.push(obj.fileId)
        fileIds.push(obj.commonId)
      })
      this.fileFileds = fileFileds.join(',') // 删除公共附件
      this.fileIds = fileIds // 有业务id 删除附件
    },
    beforeUpload(info) {
      this.uploadFile = info
      return false
    },
    handleChanges(info) {
      const data = new FormData()
      data.append('file', this.uploadFile)
      data.append('businessCode', this.businessCode)

      let arr = []
      uploadFile(data).then((res) => {
        if (res.code === 200) {


          arr.push(res.data)
          if (this.dataAssement == null) {
            this.dataAssement = arr
          } else {
            this.dataAssement = this.dataAssement.concat(arr)
          }
          this.form.uploadFileList = this.dataAssement
        }
      })
    },

    getCurrentDate() {
      var d1 = new Date()
      var year = d1.getFullYear() //年
      var month = d1.getMonth() + 1 //月
      var day = d1.getDate() //日

      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      this.recordTime = year + '-' + month + '-' + day
    },

    goBack() {
      // 关闭
      this.$close()
    },

    submit() {
      this.form.id = this.id
      this.$refs.form1.validate((err, values) => {
        if (err) {
          if (this.form.recordType == 1 && (!this.dataAssement || !this.dataAssement.length)) {
            this.$message.error('至少上传一条附件信息')
            return
          }
          this.loading = true
          editDesignChange(this.form)
            .then((res) => {
              this.loading = false
              if (res.data.code == 200) {
                this.$message.success('变更成功！')
                this.goBack()
              }
            })
            .catch(() => {
              this.loading = false
            })
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },

    getMaintainDels() {
      let that = this
      getDesignDetails({ id: that.id }).then((res) => {
        that.dels = res.data
        that.dels.changeRate = that.percentage(that.dels.changeCost, that.dels.contractAmount)
        that.dataAssement = res.data.uploadFileList
        let changeSituation = that.bd(that.dels.changeRate, '5%')
        if (changeSituation) {
          that.dels.changeLevel = '一般设计变更'
        } else {
          that.dels.changeLevel = '重大设计变更'
        }
      })
    },

    percentage(num, total) {
      num = parseInt(num)
      total = parseInt(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : Math.round((num / total) * 10000) / 100.0 + '%'
    },
    bd(a, b) {
      return Number(a.replace('%', '')) < Number(b.replace('%', ''))
    },
  },
}
</script>
